﻿@import "_variables.scss";

.navbar{
    margin-bottom:0;
}


nav#menu .mainmenu {
    border-top: 1px #444 solid;



    & > li {
        font-size: .875rem;
        border-bottom: 1px #444 solid;

        a {
            padding: .7rem .6rem;
            text-decoration: none;
            position: relative;
            display: block;
            color: #eeeeee;

            & > i {
                margin-right: .3rem;
            }

            &.active {
                background-color: $colorAssistant;
                color: #fff;

                &::after {
                    content: " ";
                    position: absolute;
                    top: 1rem;
                    right: 0;
                    width: 0;
                    height: 0;
                    border-top: 6px solid transparent;
                    border-bottom: 6px solid transparent;
                    border-right: 6px solid #fff;
                }
            }

            span.badge {
                float: right;
                margin-top: .08rem;
                font-weight: normal;
                font-size: small;
            }

            &:hover {
                background-color: $colorMain;

                span.badge {
                    background-color: #fff;
                    color: $colorMain;
                }
            }
        }

        ul.submenu {
            display: none;
            background-color: #000;

            li {
                a {
                    padding: .5rem .6rem;

                    &.active {
                        &::after {
                        
                            top:.8rem;
                        
                        }
                    }
                }
            }
        }

        &.nav-open {
            background-color: #222;

            ul.submenu {
                display: block;
            }
        }


        &.level2 {
            padding-left: 20px;
            display: none;
            background-color: #111;
            //  border-left: 3px solid $colorMain;
            a {
                color: #999;

                &:hover {
                    color: #fff;
                }

                &.active {
                    color: #fff;
                }
            }
        }
    }
}



    .closemenu a {
        display: block;
        float: right;
        background-color: #777777;
        width: 40px;
        padding: 5px 5px 3px 5px;
        border-radius: 15px 0 0 15px;
        line-height: 1;
        font-size: 16px;
        font-size: 1.6rem;
        color: #eeeeee;
        box-shadow: rgba(0, 0, 0, 0.3) 0 0 5px;

        &:hover {
            color: #fff;
        }
    }
